// Define variables to override default ones
@import "variables";

@import "../../../../../node_modules/spectre.css/src/mixins";
//@import "../../../../../node_modules/spectre.css/src/base";
@import "../../../../../node_modules/spectre.css/src/utilities";

// Layout
@import "../../../../../node_modules/spectre.css/src/layout";
@import "../../../../../node_modules/spectre.css/src/navbar";

// Import only the needed components
@import "../../../../../node_modules/spectre.css/src/buttons";
@import "../../../../../node_modules/spectre.css/src/forms";
@import "../../../../../node_modules/spectre.css/src/tabs";
@import "../../../../../node_modules/spectre.css/src/tooltips";
@import "../../../../../node_modules/spectre.css/src/toasts";

html,
body,
.app {
  height: 100%;
}
html {
  font-size: 18px;
}
body {
  //font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  padding: 0;
  margin: 0;
}

input[type="text"],
input[type="date"],
textarea {
  @extend .form-input;
  @extend .input-sm;
}
input[type="color"] {
  cursor: pointer;
  width: 24px;
  vertical-align: middle;
  border: none;
  &::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
  }
  &::-webkit-color-swatch-wrapper {
    padding: 1px;
    border-radius: 4px;
    border: 1px solid $primary-color;
  }
}
select {
  @extend .form-select;
  @extend .select-sm;
}

.panel-value-new {
  width: 60px;
  display: flex;
  align-items: center;
}
.panel-setcolor-item{
  display: flex;
  height:36px;
}
.pannel-setcolor-item-btn{
  width: 46px;
  height: 24px;
  margin: 4px 3px;
  border: none;
  background: #409eff;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
  line-height: 24px;
  padding:0;
}
.pannel-setcolor-item-btn:hover{
  background: #409eff;
}
.radiusInp{
  //width:38px;
  width:50px;
}
.panel-setcolor{
  width:200px;
}

.radioscont{
  //margin:20px 0 20px;
  line-height: 36px;
}
.radioscont label{
  font-weight: normal;
  font-size:15px;
}

.btn-small {
  width:120px;
  height:36px;
  margin:20px 0;
  background-color: #42b966;
  color:#fff;
  font-size:16px;
  border:none;
  cursor: pointer;
  outline: none;
}
.btn-small:hover {
  background-color: #409eff;
}
.data-group{
  padding:0 15px;
}
.radiolabel{
  font-weight: normal;
  margin-right:10px;
}
.panel-value.panel-value-color-1{
  min-width: 146px;
}
.panel-value.panel-value-color-2{
  min-width: 40px;
}

// for echarts
.echarts {
  width: 100%;
  height:100%;
}

input, input[type='number'],input[type='text'], optgroup, select {
  height: 28px;
  line-height: 28px;
  border: 1px solid #ccc;
  font-size:13px;
  padding: 0 0 0 5px;
}
//.panel-wrap button{
.panel-wrap .api-btn{
  height: 28px;
  line-height: 28px;
  border: none;
  font-size:13px;
  padding: 0;
  outline: none;
}
.panel-wrap .panel-row .el-button{
  padding:0 8px;
}
textarea{
  font-size:13px;
  padding: 0 0 0 5px;
  border: 1px solid #ccc;
}
input[type='color']{
  height:24px;
  line-height: 24px;
  padding:0
}
input[type='radio']{
  vertical-align: middle;
}
.el-radio__label{
  padding-left:5px;
}
.el-radio{
  margin-right:10px;
}
.panel-colormsg{
  display: flex;
  align-items: center;
  min-width: 143px;
}
.panel-colorpick{
  display:flex;
  align-items: center;
}
.list-container .tool-item .tool-item__name{
  font-size:12px;
}
.panel-wrap .tab .tab-item a{
  font-size:14px;
}

.panel-tab-mini .el-tabs__item{
  height:34px;
  line-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}
.panel-tab-mini .el-tabs__nav-wrap{
  margin-left:15px;
}
.panel-tab-mini .el-tabs__new-tab{
  display: none;
  width:20px;
  height:20px;
  margin:10px 0 0 6px;
}
.radiowrap{
  font-size:14px;
}
.panel-radio-cont .el-radio__label{
  font-size:12px;
}
.panel-color-cont{
  width:140px;
}
.panel-color-icon{
  font-size:16px;
  line-height: 33px;
  cursor: pointer;
}
.panel-ele-sel{
  width: 170px;
}
.panel-ele-sel input[readonly][type="text"].el-input__inner{
  background-color:#fff;
}
.panel-ele-sel input[readonly][type="text"].el-input__inner:focus{
  box-shadow: none;
}
